<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<%@ page import="org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter" %>
<%@ page import="org.springframework.security.core.AuthenticationException" %>

<h1>Question <a href="javascript:popupLogin()" id='btn_login_popup' class='rndbutton'>Ajax Login</a><br/></h1>

<div>
	<h1><c:out value="${question.title}" escapeXml="true" /><br/></h1>		
</div>
<div>
    tags:
	<c:forEach var="tag" items="${question.tagList}">
		<a href="<c:url value="/questions/tags/${tag.name}" />"><c:out value="${tag.name}" escapeXml="true" /></a>
	</c:forEach>
	<br/>
</div>
<div>
    vote count:${question.voteCount}|view count:${viewCount}
	<br/>
	<a href="javascript:qvoteup(${question.id})">useful</a>
	<a href="javascript:qvotedown(${question.id})">unuseful</a>
</div>
<div>
    answer count:${question.answerCount}
	<br/>
</div>
<div>			
	${question.createdDate}<br/>
	${question.modifyDate}<br/>
	${question.modifierId}<br/>
</div>
<div>	
	${question.content}<br/>
</div>

<div id="answers">
	<table class="summary">
		<thead>
			<tr>
				<th>Vote</th>
				<th>Answer</th>
				<th>UserId</th>
				<th>comment count</th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			<c:forEach var="answer" items="${pageImpl.content}">
			<tr>
				<td>
					${answer.voteCount}
				</td>
				<td>
					<a href="javascript:popupComment(${answer.id})" id='btn_comment_popup' class='rndbutton'>${answer.content}</a><br/>
					<a href="javascript:voteup(${answer.id})">useful</a>
					<a href="javascript:votedown(${answer.id})">unuseful</a>
				</td>
				<td>${answer.userId}</td>
				<td>${answer.commentCount}</td>
				<td>
					<c:forEach var="answerComment" items="${commentsMap[answer.id].content}">
						${answerComment.content}<br/>
					</c:forEach>
				</td>
			</tr>
			</c:forEach>
		</tbody>
	</table>
</div>

<div id="inlineComment" style="width:500px;display: none;">
	<form:form id="CommentForm" modelAttribute="answerComment" method="post" cssClass="inline">
    <fieldset>
		<div class="span-8">
			<form:hidden id="answerId" path="answer.id"/>
			<form:textarea id="commentContent" path="content" style="width:450px;height:200px;"/><br/>
			<a href="javascript:commentSubmit()" id='btn_comment_answer' class='rndbutton'><span>Post Comment</span></a>
		</div>
	</fieldset>
	</form:form>
</div>

<div id="answers">
	<form:form id="AnswerForm" modelAttribute="answer" method="post" cssClass="inline">
	    <fieldset>
			<div class="span-8">
				<form:hidden id="questionId" path="question.id"/>
				<form:textarea id="answerContent" path="content" style="width:680px;height:200px;"/><br/>
				<a href="javascript:answerSubmit()" id='btn_submit_answer' class='rndbutton'><span>Post Answer</span></a>
			</div>
		</fieldset>
	</form:form>
</div>
<script type='text/javascript'>
	<!--
	var editor;
	$(document).ready(function(){
		editor = KindEditor.create('textarea[id="answerContent"]',{
			id : 'contentID',
			resizeMode : 1,
			shadowMode : false,
			allowPreviewEmoticons : false,
			allowUpload : true,
			syncType : 'form',
			urlType : 'domain',
			uploadJson : '<c:url value="/image/upload" />',
			items : ['bold', 'italic', 'underline', 'strikethrough', 'removeformat','|',
'formatblock', 'fontname', 'fontsize','|',
'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent','|',
'link', 'unlink', 'emoticons', 'image', 'flash', '|',
'selectall','source' ,'about']
		});
	});

	$(document).ready(function(){
		$("#AnswerForm").ajaxStart(function(){
				$('#btn_submit_answer span').html('posting...');
	    });
		$("#AnswerForm").ajaxComplete(function(event,request, settings){
				$('#btn_submit_answer span').html('Post');
	    }); 
	});

	$(document).ready(function() {
		$('.fancybox').fancybox();
	});

	function popupComment(answerId){
		$('#answerId').val(answerId);
		$.fancybox.open({
			href : '#inlineComment',
			type : 'inline',
			padding : 5
		});
	}

	function popupLogin(){
		$.fancybox.open({
			href : '<c:url value="/ajaxlogin"/>',
			width: 360,
			minHeight : 235,
			type : 'iframe',
			padding : 5
		});
	}

	function answerSubmit(){
		editor.sync();
		var form = $('#AnswerForm').serialize();
		$.post('<c:url value="/ajax/questions/answer/submit"/>',form,function(data){
			if (data.error == 0){
				location.href = '<c:url value="/questions/"/>'+data.questionId;
			} else if(data.error == 1) {
	    		alert(data.messages);
			}else if (data.error == 2){
				popupLogin();
			} else {
				alert(data);
			}
		});
	}

	function commentSubmit(){
		var form = $('#CommentForm').serialize();
		$.post('<c:url value="/ajax/questions/comment/submit"/>',form,function(data){
			if (data.error == 0){
				location.href = '<c:url value="/questions/"/>'+data.questionId;
			} else if(data.error == 1) {
	    		alert(data.messages);
			}else if (data.error == 2){
				popupLogin();
			} else {
				alert(data);
			}
		});
	}
	//-->
</script>

<c:url var="voteupUrl" value="/ajax/questions/voteup"/>
<c:url var="votedownUrl" value="/ajax/questions/votedown"/>
<c:url var="qvoteupUrl" value="/ajax/questions/qvoteup"/>
<c:url var="qvotedownUrl" value="/ajax/questions/qvotedown"/>
<script type="text/javascript">	
	<!--
	function voteup(answerId) {
		$.post('${voteupUrl}/'+answerId,null,function(data) {
			if (data.error == 0){
				alert("sucess");
			} else if(data.error == 1) {
	    		alert(data.messages);
			}else if (data.error == 2){
				popupLogin();
			} else {
				alert(data);
			}
		});
	}

	function votedown(answerId) {
		$.post('${votedownUrl}/'+answerId,null,function(data) {
			if (data.error == 0){
				alert("sucess");
			} else if(data.error == 1) {
	    		alert(data.messages);
			}else if (data.error == 2){
				popupLogin();
			} else {
				alert(data);
			}
		});
	}

	function qvoteup(questionId) {
		$.post('${qvoteupUrl}/'+questionId,null,function(data) {
			if (data.error == 0){
				alert("sucess");
			} else if(data.error == 1) {
	    		alert(data.messages);
			}else if (data.error == 2){
				popupLogin();
			} else {
				alert(data);
			}
		});
	}

	function qvotedown(questionId) {
		$.post('${qvotedownUrl}/'+questionId,null,function(data) {
			if (data.error == 0){
				alert("sucess");
			} else if(data.error == 1) {
	    		alert(data.messages);
			}else if (data.error == 2){
				popupLogin();
			} else {
				alert(data);
			}
		});
	}
	//-->
</script>

